 <template>
  <view class="com-topic">
    <view v-if="titleShow" class="title u-m-b-20 u-flex u-row-between">
      <view class="name">话题</view>
      <!-- <navigator url="/pages/classify/" open-type="navigate" hover-class="none" class="more">
        更多 <u-icon name="arrow-right" size="26" color="#999"></u-icon>
      </navigator> -->
    </view>
    <view class="list">
      <navigator v-for="(item, index) in topicList" :key="index" :url="isLink ? `/pages/subpackages/topic/detail/topic?id=${item.id}` : `/pages/subpackages/topic/release/discuss?id=${item.id}`" open-type="navigate"
        hover-class="none" class="item u-p-20">
        <view class="title u-flex u-row-between">
          <view class="name">{{item.title || ""}}</view>
          <!-- <view v-if="!index" class="heat u-flex">
            <u-image src="/static/img/heat.png" mode="widthFix" width="30"></u-image>
            <text class="u-m-l-10">热</text>
          </view> -->
        </view>
        <view class="content u-line-2 u-font-26">{{item.content || ""}}</view>
        <view class="u-font-26 u-rela u-flex u-row-between">
          <view class="left u-flex">
            <view class="icon u-flex">
              <u-image src="/static/img/topic-icon-01.png" mode="aspectFill" width="36" height="36"></u-image>
              <text class="u-m-l-8">{{item.people || ""}} 加入</text>
            </view>
            <view class="icon u-flex">
              <u-image src="/static/img/topic-icon-02.png" mode="aspectFill" width="36" height="36"></u-image>
              <text class="u-m-l-8">{{item.discuss || ""}} 讨论</text>
            </view>
            <view class="icon u-flex">
              <u-image src="/static/img/topic-icon-03.png" mode="aspectFill" width="36" height="36"></u-image>
              <text class="u-m-l-8">{{item.browse || ""}} 浏览</text>
            </view>
          </view>
          <view @click.stop>
            <u-tag v-if="item.is_qgz == 1" @click="followTopic(index, item.id, item.is_qgz, item.people)" text="已关注" shape="circle" bg-color="#389bf2" color="#fff" border-color="#389bf2" />
            <u-tag v-else @click="followTopic(index, item.id, item.is_qgz, item.people)" text="关注" shape="circle" bg-color="#fff" color="#389bf2" border-color="#389bf2" />
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "com-topic",
  data() {
    return {};
  },
  props: {
    // 标题是否显示
    titleShow: {
      type: Boolean,
      default: true,
    },
    // 话题
    topicList: {
      type: Array,
      default: () => [],
    },
    // 是否跳转
    isLink: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState(["vuex_user_id"]),
  },
  methods: {
    // 关注话题
    followTopic(index, id, status, number) {
      this.$emit("followTopic", {
        index: index,
        id: id,
        status: status,
        number: number,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.com-topic {
  .name {
    padding: 0 10rpx;
    border-left: 3px solid $uni-bg-color-main;
    font-weight: bold;
  }

  .list {
    .item {
      background-color: $uni-bg-color;
      border-radius: 10rpx;

      .name {
        font-weight: bold;
      }

      .content {
        margin: 20rpx 0;
        color: $uni-text-color-grey;
      }

      &:nth-child(n + 2) {
        margin: 20rpx 0 0;
      }
    }

    .icon {
      &:nth-child(n + 2) {
        margin-left: 10rpx;
      }
    }
  }
}
</style>
